<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS_固定定位</title>
    <style>
        .outer {
            width: 500px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
            font-size: 20px;
        }

        .box1 {
            background-color: #888;
        }

        .box2 {
            background-color: orange;
            position: fixed;
            top: 0;
            left: 0;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quos aliquid beatae tempore explicabo ab
            deserunt quasi voluptatum. Laudantium in id harum repudiandae a, voluptates ea ipsum deserunt rem sapiente
            laboriosam odio sit natus temporibus labore unde dolorem deleniti quidem magnam! Odio quo, omnis ab tempore
            voluptate consequatur error veritatis qui. Quidem laudantium obcaecati pariatur assumenda vitae blanditiis
            deleniti a officiis. In impedit error at omnis rem cumque, veritatis exercitationem corporis repellat,
            necessitatibus nulla excepturi est id aut laudantium inventore tempora soluta deserunt quos, facilis
            voluptatibus aperiam. Perferendis illum veritatis quaerat ex libero quam beatae, ipsum sit autem quo
            recusandae labore! Totam non voluptatibus libero? Doloribus, eius, voluptatem error rem voluptates rerum
            magnam aliquam nobis corporis maiores necessitatibus, facere tenetur nesciunt! Sunt culpa distinctio
            perferendis error vel, aut quam numquam quibusdam doloremque, hic ut. Quaerat, suscipit enim voluptas
            blanditiis magnam beatae doloremque eveniet alias iure provident aperiam laudantium harum obcaecati itaque
            cupiditate aspernatur velit quas? Eaque a officia sequi ex odit animi, minima explicabo obcaecati illo ipsam
            vitae, facilis nihil odio similique quo asperiores? Hic molestias veniam iure sint nulla reprehenderit
            perspiciatis ut? Sint corporis praesentium sequi reprehenderit optio nesciunt quibusdam repellat cumque quae
            maxime facere ipsa, corrupti eaque ratione, id vel minima deleniti quia alias. Unde, tenetur! Excepturi nisi
            doloribus, magnam dolore error necessitatibus ex ad omnis rerum consequatur reiciendis ipsa sequi? Fuga
            recusandae, dignissimos ullam, odit tempore esse laborum voluptatem neque delectus dicta dolorum veritatis
            dolore. Distinctio, fugiat veniam? Molestias similique minus laboriosam eius culpa fugiat. Nesciunt, libero
            voluptatibus. Earum corrupti, odio nam eveniet porro similique nulla quam dicta vel! Natus non, sit nobis
            magnam dicta cum necessitatibus voluptate quas sint deserunt earum enim laudantium nesciunt molestiae harum
            maxime culpa quia eius illo minima fugiat distinctio ut sequi animi. Praesentium consectetur expedita
            consequatur doloremque necessitatibus deleniti, sed, libero, et aut rem non dolore magnam! Saepe neque
            temporibus ab nihil possimus dicta, sequi, perspiciatis quaerat minima dolore, nobis fuga officia vero
            aspernatur mollitia quae consectetur labore soluta velit eius? Tempora maiores saepe molestiae quibusdam
            sequi odit, minima dolor voluptatum ducimus cupiditate voluptas? Nihil ea asperiores ut dolor,
            necessitatibus pariatur quidem voluptatibus rerum eaque quia quasi corporis, obcaecati illo temporibus neque
            est aliquam ducimus a eligendi beatae nobis explicabo quas. Veniam, dignissimos! Quas dolores libero quis
            voluptate facilis veritatis ut in aliquid quidem? Repellat officiis, ipsum rerum, voluptate molestiae nam
            fuga culpa deleniti cum sequi porro. Corrupti porro laudantium asperiores veritatis repellat! Ab,
            cupiditate. Voluptatem aut quidem iste corporis voluptatibus eaque facere fugit optio minima mollitia
            dolorum sequi quibusdam quisquam laborum dicta qui, repudiandae odio distinctio ad sit natus dolores! Quas
            temporibus, facilis aliquam maxime beatae mollitia laborum deserunt. Provident nulla, quas minus sunt velit
            nihil adipisci repellendus, sequi dolores, voluptate cum quisquam recusandae. Rerum, optio quaerat fugiat
            amet beatae voluptatum at labore soluta, ratione ipsum harum porro sit doloremque, nulla eaque natus! Maxime
            ut iusto dolorem libero soluta voluptatibus, esse voluptas fuga aliquam molestias dicta consectetur ratione
            labore sapiente error quia voluptatem, pariatur blanditiis doloremque recusandae, perferendis deleniti?
            Alias tempore autem tempora officiis facere maiores rem quod quo delectus neque assumenda veritatis sequi,
            corporis nobis, vel sapiente culpa quidem in dolore laborum animi! Eius eaque veritatis voluptas aliquam
            nam. Soluta, atque accusantium earum id, esse nesciunt veritatis eius vitae aut velit aliquid similique
            libero nobis in amet laborum facilis magnam numquam quidem maxime ad. Voluptatum molestias obcaecati
            incidunt repellat quam magnam nesciunt vel tenetur reprehenderit eius veniam, expedita corporis officia amet
            maiores ea nam ratione in alias placeat, magni rerum aliquam explicabo. Ad, animi nesciunt? Nobis
            consequuntur dolorem ipsum deleniti earum quasi sed voluptas alias nesciunt, totam recusandae debitis.
            Voluptatum sapiente esse iusto quos culpa, odit, labore eveniet fugit tenetur quia reprehenderit molestias
            cum iste soluta consequuntur veritatis ipsam? Alias natus itaque quasi enim est at excepturi inventore nemo
            expedita distinctio. Ipsum cumque aliquid officiis labore praesentium saepe in expedita impedit mollitia
            accusamus rem eligendi nemo illum placeat reiciendis, fugit sapiente consectetur consequuntur?
            Exercitationem quam est magni adipisci asperiores repellendus numquam rem. Et rem ea facere iusto aliquam
            delectus, quas repudiandae, dignissimos deleniti numquam atque temporibus tenetur sunt libero veniam
            voluptatibus nisi suscipit pariatur quibusdam quam aut! Iusto animi suscipit nostrum minima cum voluptatibus
            minus ad nemo possimus, ratione esse reprehenderit accusamus deleniti consectetur incidunt saepe blanditiis
            sint laborum? Pariatur quibusdam laudantium amet, non vel nam perspiciatis quo autem itaque vitae est,
            facere praesentium corrupti fugiat asperiores. Quaerat cum eum dolores quia temporibus voluptatibus et atque
            vel rem earum magnam distinctio dignissimos necessitatibus doloremque laboriosam repellendus tenetur veniam
            odit commodi, neque exercitationem nostrum accusantium enim corrupti! Nobis explicabo vero consequuntur ad
            temporibus deserunt dolore non sed minus cumque corporis, totam ab, libero, sunt dignissimos inventore at
            laboriosam a? Eius tempora ab aliquid a temporibus voluptates laborum dolorum, suscipit inventore?
            Laudantium nesciunt numquam iusto autem blanditiis, exercitationem, molestias vero minus impedit repellendus
            voluptate totam eius eaque libero deserunt magnam? Quis earum quisquam assumenda consequuntur officia beatae
            cupiditate ullam, odio odit facere fugit accusantium, magnam doloribus exercitationem autem voluptas itaque
            temporibus explicabo non, veniam perspiciatis tempore ipsam. Excepturi mollitia modi magni cupiditate
            nostrum. Molestias, aperiam. Voluptate dolores laboriosam tempora animi eaque et tempore alias vel minus
            inventore, ducimus fuga accusantium, harum delectus sequi, praesentium distinctio soluta! Inventore enim
            repudiandae sit, doloremque laudantium officia nihil quas architecto nostrum soluta obcaecati at voluptatum
            possimus dolorum minus impedit amet rerum iste placeat ex. Neque nesciunt nostrum inventore nemo, sint
            deserunt vel, a officiis doloremque, aut vero iste aspernatur? Qui adipisci possimus perferendis laboriosam
            doloremque fuga! Eaque officiis animi, dolore temporibus vero at minima magni nam consequatur nesciunt
            reiciendis debitis est odio autem suscipit quo ea neque voluptatem iste explicabo incidunt aliquam eligendi
            illum. Consectetur accusamus ullam repellendus ipsa reiciendis rerum maxime, doloribus doloremque alias
            laborum, ipsum nobis sed accusantium minus. Dolorem praesentium unde quod quas similique, nisi, cumque
            voluptatum itaque, officia deleniti id odio. Sint porro cum earum excepturi commodi error accusantium minus
            et, ex dolorem voluptatum, repudiandae rerum natus dolorum maxime placeat laudantium consequuntur illo totam
            eos sed saepe. Fugit ab maiores cupiditate!</div>
    </div>
</body>

</html>